<template>
	<view class="content mar">
		<view class="">
			<view class="title">基础情况评估</view>
			<view class="a-bet" v-for="(i,index) in basicList" :key="index">
				<view class="title-name b-center">{{i.fieldName}}</view>
				<view class="" v-if="i.fieldType==1">
					<!-- <u--input :placeholder=i.hintLanguage type=" number" inputAlign="right" placeholderClass="grey"
						border="none" v-model="value" @change="change">
					</u--input> -->
				</view>
				<view class="" v-if="i.fieldType==3">
					<text class="grey">{{i.hintLanguage}}</text>
				</view>
				<view class="" v-if="i.fieldType==2">
					<text class="grey">{{i.hintLanguage}}</text>
					<picker mode="date" :value="info.date" :end="endDate" @change="bindDateChange"
						style="font-size: 24rpx">
						<view class="d-j-between" style="">
							<view v-if="info.birthday == ''" class="label-input"
								style="font-size: 24rpx; color: #c0c4cc">
								{{i.hintLanguage}}
							</view>
							<view v-else>
								时间
							</view>
							<!-- <u-icon style="text-align: end" name="arrow-right" size="32"></u-icon> -->
						</view>
					</picker>
				</view>
			</view>
		</view>
		<view class="">
			<view class="title">专项情况评估</view>
			<view class="" v-for="(i,index) in professionalList" :key="index">
				<view class="title-name b-center">{{i.fieldName}}<text class="star">*</text></view>
				<view class="" v-if="i.fieldType==0">
					<!-- <u-radio-group v-model="radiovalue1" placement="row" inactiveColor="#666666" @change="groupChange"
						class="df">
						<u-radio :customStyle="{marginRight: '5%'}" labelColor="#333333" iconColor="#666666"
							v-for="(item, index1) in i.choiceType" :key="index1" :label="item.name" :name="item.name"
							@change="radioChange" size=32 labelSize=32>
						</u-radio>
					</u-radio-group> -->
					<!-- <uni-data-checkbox v-model="data[i.value]" :localdata="i.options"></uni-data-checkbox> -->
				</view>
			</view>
		</view>
		<view class="">
			<view class="title">护理图片（5-10张）</view>
			<view class="photoBox">
				<view class="photo" v-for="(item,index) in photo" :class="{'none': (index+1)%4==0}"
					style="background-color: rgba(243, 246, 246, 1);" :key="index" @click.prevent="clickImg(index)">
					<image :src="item" mode="aspectFit"></image>
					<text class="iconfont icon-a-qingkongpng cha" @click.stop="del(index)"></text>
				</view>
				<view class="addPhoto d-center" @click="add" v-show="photo.length<10">
					<view class="iconfont icon-paishe xiangji">
					</view>
				</view>
			</view>
			<view class="">
				<view class="tip-title">
					上传须知：
				</view>
				<view class="">
					<view class="tip">1、上门护士本人手持身份证照片，并且身份证清晰</view>
					<view class="tip">2、操作照，前中后各一张。</view>
					<view class="tip">3、服务承诺函，需患者进行签字。</view>
				</view>
			</view>
		</view>
		<view class="">
			<view class="title">患者主述<text class="star">*</text></view>
			<view class="" style="padding:2%;font-size: 14px;">
				<!-- <u--textarea border="none" placeholderStyle="{fontSize: 14px;fontWeight: 400;color: #999999;}"
					height=240 v-model="value1" placeholder="请输入患者的症状描述" class=""></u--textarea> -->
			</view>

		</view>

		<view class=" ">
			<view class="title">护理内容<text class="star">*</text></text></view>
			<view class="" style="padding:2%;font-size: 14px;">
				<!-- <u--textarea border="none" placeholderStyle="{fontSize: 14px;fontWeight: 400;color: #999999;}"
					height=240 v-model="value1" placeholder="请填写您的护理内容" class=""></u--textarea> -->
			</view>
			<!-- <textarea value="" v-model="data1.nursingContent" placeholder="请填写您的护理内容"
				placeholder-style="color: rgba(0, 0, 0, 0.1);font-size: 28rpx;" class="record" /> -->
		</view>
		<view class="project mypadding">
			<view class="title">健康指导<text class="star">*</text></text></view>
			<view class="" style="padding:2%;font-size: 14px;">
				<!-- <u--textarea border="none" placeholderStyle="{fontSize: 14px;fontWeight: 400;color: #999999;}"
					height=240 v-model="value1" placeholder="请填写服务完成后的健康指导内容" class=""></u--textarea> -->
			</view>
			<!-- 	<textarea value="" v-model="data1.healthGuidance" placeholder="请填写服务完成后的健康指导内容"
				placeholder-style="color: rgba(0, 0, 0, 0.1);font-size: 28rpx;" class="record" /> -->
		</view>
		<view class="">
			<view class="df">
				<view class="" style="width: 8%;">
					<checkbox-group name="" @change="check">
						<label class="label">
							<checkbox value="cb" :checked="checked" color="#3C8EFF"
								style="transform:scale(0.7);width: 24rpx;height:24rpx;" />
						</label>
					</checkbox-group>
				</view>

				<view class="notice">
					请如实填写以上内容，如有弄虚作假，后果由填写的护士本人负责，并直接影响本次操作的佣金结算。
				</view>
			</view>
			<view class="">
				<view class="save d-center" style="margin: 5% 0 8% 0;" @click="save()">
					提交
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import LbPicker from '@/components/uni-ui/lb-picker';
	import uploadImage from '@/common/js/ossutil/uploadFile.js'
	import {
		translateapp
	} from '../../../common/js/common.js'
	import {
		created
	} from '@/apis/report/index.js'
	// import apiOption from '@/apis/nurse-report/index.js'
	import {
		selectConfigurationByServiceId
	} from '@/apis/nurse-report/index.js'
	import {
		selectOrderInfo
	} from '@/apis/order/index.js'
	import {
		requestAndroid
	} from '@/common/js/location.js'
	import biaofunDatetimePicker from '@/components/biaofun-datetime-picker/biaofun-datetime-picker.vue';

	export default {
		data() {
			return {
				arr1: [{
						name: '体温(摄氏度)',
						value: 'animalHeat',
						belongs: 0,
						type: 1,
						placeholder: '请输入体温'
					},
					{
						name: '脉搏 (次/分钟）',
						value: 'sphygmus',
						belongs: 0,
						type: 1,
						placeholder: '请填写脉搏'
					},
					{
						name: '呼吸 (次/分钟）',
						value: 'breathe',
						belongs: 0,
						type: 1,
						placeholder: '请填写呼吸'
					},
					{
						name: '血压 (mmHg）',
						value: '',
						belongs: 0,
						type: 3,
						placeholder: '请选择血压'
					},
					{
						name: '时间',
						value: '',
						belongs: 0,
						type: 2,
						placeholder: '请选择时间'
					},
				],
				number: '', //订单号
				//高压低压
				heightPre: '',
				lowPre: '',
				//血压选项默认值
				pressureDefault: [70, 110],
				photo: [], //照片
				checked: false, //是否本人操作
				service: '', //用户信息
				data1: {}, //上传内容
				arr2: [],
				// 基本情况评估
				basicList: [],
				// 专项情况评估
				professionalList: [],
				// 服务id
				serviceId: ''
			}
		},

		onLoad(option) {
			if (option.number) {
				this.number = option.number
			}
			this.serviceId = JSON.parse(option.serviceId)
			console.log('serviceId:', this.serviceId)
			this.createMenu(this.serviceId)
			// console.log(this.number, 'number')
		},
		onShow() {
			// this.orderMsg()
		},
		watch: {
			data1(val) {
				console.log(val)
			},
			// 	data1: {
			// 		deep: true,
			// 		handler(newV) {
			// 			console.log(newV)
			// 		}
			// 	},
			photo(val) {
				if (val.length > 10) {
					this.photo = this.photo.slice(0, 10)
				}
			},
		},
		computed: {
			//低压范围
			low() {
				let arr = []
				for (let i = 50; i < 100; i++) {
					arr.push(i)
				}
				return arr
			},
			//高压范围
			height() {
				let arr = []
				for (let i = 70; i < 200; i++) {
					arr.push(i)
				}
				return arr
			},
			showHeight() {
				if (this.heightPre) {
					return '高压:' + this.heightPre + 'mmHg'
				}
			},
			showLow() {
				if (this.lowPre) {
					return '低压:' + this.lowPre + 'mmHg'
				}
			},
			pressureArr() {
				// let arr=[this.low , this.height]
				let arr = [
					[1],
					[2]
				]
				return arr
			}
		},
		methods: {
			formAdd() {
				console.log('修改后表单', this.arr1)
			},
			async createMenu(serviceId) {
				let that = this
				let res = await selectConfigurationByServiceId({
					serviceId
				})
				if (res.success) {
					// console.log('查询字段成功', res)
					that.basicList = res.object.filter(i =>
						i.fieldBelong == 0
					)

					that.professionalList = res.object.filter(i =>
						i.fieldBelong == 1
					)
					that.professionalList.forEach(i => {
						i.choiceType = Object.values(JSON.parse(i.choiceType))
					})
					console.log('basicList', that.basicList)
					console.log('professionalList', that.professionalList)
				}
			},
			//添加照片
			add() {
				let that = this;
				if (this.photo.length > 10) {
					plus.nativeUI.toast('您只需上传10张图片')
					// uni.showToast({
					// 	icon:'none',
					// 	title:'您只需上传两张图片'
					// })
				} else {
					uni.chooseImage({
						count: 10, //默认9
						sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album', 'camera'],
						// sourceType: ['album'], //从相册选择
						success: function(res) {
							let tempFiles = res.tempFilePaths;
							uni.showLoading({
								title: '上传中……',
							})
							//上传图片 请求多个图片
							for (var i = 0; i < tempFiles.length; i++) {
								translateapp(tempFiles[i], 80, imgUrl => {
									// console.log(imgUrl,'护理报告---imgUrl');
									uploadImage(imgUrl, 'feedback/',
										result => {
											console.log('打印的结果', result);
											that.url = result;
											that.photo.push(
												result) //如果图片一次性就超过这个值怎么使他赋的值回退
											uni.hideLoading()
										}, error => {
											uni.showToast({
												title: '上传失败',
												image: '../../static/authentication/error.png'
											})
										})

								})
								// uploadImage(tempFiles[i], 'feedback/',
								// 	result => {
								// 		console.log('打印的结果', result);
								// 		that.url = result;
								// 		that.photo.push(result) //如果图片一次性就超过这个值怎么使他赋的值回退
								// 		uni.hideLoading()
								// 	}, error => {
								// 		uni.showToast({
								// 			title: '上传失败',
								// 			image: '../../static/authentication/error.png'
								// 		})
								// 	})
							}
						},
						fail(e) {
							if (e.errCode == 11) {
								requestAndroid('android.permission.CAMERA', '摄像头')
							}
							// console.log(e,'shibaihuid........')
						}
					});
				}
			},
			//删除照片
			del(index) {
				uni.showModal({
					title: '确认删除当前图片吗',
					confirmColor: '#FF6A00',
					success: (res) => {
						if (res.confirm) {
							this.photo.splice(index, 1)
						}
					}
				})
			},
			//图片预览
			clickImg(index) {
				let _this = this
				wx.previewImage({
					urls: _this.photo,
					current: _this.photo[index], // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			//本人操作
			check() {
				this.checked = !this.checked
				console.log(this.checked, '是否本人操作')
			},
			//查看用户其他资料
			other() {
				uni.navigateTo({
					url: '../../order/other-detaile/other-detaile?number=' + this.number
				})
			},
			//提交
			async save() {
				if (this.checked) {
					if (this.lowPre && this.heightPre) {
						this.data.bloodPressure = this.lowPre + '/' + this.heightPre
					}
					let som = this.arr2.some(some => {
						if (!this.data[some.value]) {
							// uni.showToast({
							// 	icon:'none',
							// 	title: '请选择'+ some.name
							// })
							return true
						}
					})
					if (som) return
					if (som && this.data.healthGuidance && this.data.nursingContent && this.data
						.principleAction) {
						// if (true) {
						if (this.photo.length > 10 || this.photo.length < 5) {
							// plus.nativeUI.toast('护理图片需为5-10张')
							uni.showToast({
								icon: 'none',
								title: '护理图片需为护理图片需为5-10张'
							})
							return
						}
						this.data.staPictureUrl = this.photo.join(',')
						// this.data.endPictureUrl = this.photo[1]
						this.data.userId = this.service.healthFile.userId
						this.data.number = this.number
						console.log(this.data, '0000000000')
						let res = await created(this.data)
						if (res.success) {
							// plus.nativeUI.toast('创建护理报告成功')
							uni.showToast({
								icon: 'none',
								title: '创建护理报告成功'
							})
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								}, 300)
							})
						}
					} else {
						// plus.nativeUI.toast('请填写所有必选项')
						uni.showToast({
							icon: 'none',
							title: '请填写所有必选项！'
						})
					}
				} else {
					// plus.nativeUI.toast('请确认是您本人真实操作')
					uni.showToast({
						icon: 'none',
						title: '请确认是您本人真实操作！'
					})
				}
			},
			//获取订单详情
			async orderMsg() {
				let number = this.number
				let res = await selectOrderInfo({
					number
				})
				this.service = res.object
				console.log(res, '订单详情')
			}
		},
		components: {
			LbPicker,
			biaofunDatetimePicker
		},
	}
</script>

<style lang="less" scoped>
	.title {
		margin-top: 3%;
		height: 25px;
		font-size: 18px;
		font-weight: 500;
		color: #333333;
		line-height: 25px;
	}

	.title-name {
		font-size: 16px;
		font-weight: 400;
		color: #333333;
		height: 54px;
	}

	.content {
		width: 90%;
		min-height: 100vh;
		box-sizing: border-box;
	}

	.star {
		color: #EA2027;
		margin-left: 2%;
	}

	.photoBox {
		display: flex;
		flex-wrap: wrap;

		.addPhoto {
			margin-top: 5%;
			width: 152rpx;
			height: 152rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			border: 2rpx dashed rgba(0, 0, 0, 0.87);
			margin-right: 26rpx;
			margin-bottom: 26rpx;
			position: relative;

		}

		.photo {
			width: 144rpx;
			height: 144rpx;
			border-radius: 20rpx;
			margin-right: 26rpx;
			margin-bottom: 26rpx;
			position: relative;

			&.none {
				margin-right: 0;
			}

			image {
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
			}

			.cha {
				position: absolute;
				font-size: 36rpx;
				right: -10rpx;
				top: -18rpx;
			}
		}

	}

	.tip-title {
		font-size: 16px;
		font-weight: 400;
		color: #333333;
	}

	.tip {
		font-size: 13px;
		font-weight: 400;
		color: #3C8EFF;
		margin: 1%;
	}

	.notice {
		width: 90%;
		height: 34px;
		font-size: 12px;
		font-weight: 400;
		color: #666666;
	}

	.save {
		height: 45px;
		background: #3C8EFF;
		border-radius: 4px;
		font-size: 18px;
		font-weight: 400;
		color: #FFFFFF;
	}

	::v-deep.grey {
		font-size: 16px !important;
		font-weight: 400 !important;
		color: #999999 !important;
	}
</style>
